feat(masonry): add optional adjustHeight prop to prevent layout overlap#918
feat(masonry): add optional adjustHeight prop to prevent layout overlap#918igenius99-dev wants to merge 1 commit intoDavidHDev:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adds an optional adjustHeight prop to the Masonry component variants so the container can size itself to its absolutely-positioned children, preventing downstream content overlap.
Changes:
- Introduces
adjustHeight?: boolean(defaultfalse) across JS/TS and CSS/Tailwind Masonry variants and conditionally applies an explicit container height. - Updates Masonry code previews and registry JSON entries to include the new prop.
- Updates the Masonry demo prop table to document
adjustHeight.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/ts-tailwind/Components/Masonry/Masonry.tsx | Adds adjustHeight and computes/applies container height from laid-out grid items. |
| src/ts-default/Components/Masonry/Masonry.tsx | Adds adjustHeight and computes/applies container height from laid-out grid items. |
| src/tailwind/Components/Masonry/Masonry.jsx | Adds adjustHeight and computes/applies container height during layout calculation. |
| src/content/Components/Masonry/Masonry.jsx | Adds adjustHeight and returns a computed containerHeight alongside grid. |
| src/demo/Components/MasonryDemo.jsx | Documents adjustHeight in the demo prop table and attempts to pass a prop to Masonry. |
| src/constants/code/Components/masonryCode.js | Updates the code snippet to include adjustHeight. |
| public/r/Masonry-TS-TW.json | Syncs registry component content with the new prop/behavior. |
| public/r/Masonry-TS-CSS.json | Syncs registry component content with the new prop/behavior. |
| public/r/Masonry-JS-TW.json | Syncs registry component content with the new prop/behavior. |
| public/r/Masonry-JS-CSS.json | Syncs registry component content with the new prop/behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| return { ...child, x, y, w: columnWidth, h: height }; | ||
| }); | ||
| const containerHeight = colHeights.length > 0 ? Math.max(...colHeights) : 0; |
There was a problem hiding this comment.
In the Tailwind Masonry, containerHeight is computed from Math.max(...colHeights), but colHeights includes the trailing gap added after the last item in each column (colHeights[col] += height + gap). This makes adjustHeight overshoot the actual content height by one gap. If the intent is to tightly fit the items, compute height from the laid-out items (e.g., max of y + h) or subtract the final gap from the max column height.
| const containerHeight = colHeights.length > 0 ? Math.max(...colHeights) : 0; | |
| const containerHeight = gridItems.length > 0 ? Math.max(...gridItems.map(item => item.y + item.h)) : 0; |
| scaleOnHover={scaleOnHover} | ||
| blurToFocus={blurToFocus} | ||
| colorShiftOnHover={colorShiftOnHover} | ||
| autoAdjust={false} | ||
| /> |
There was a problem hiding this comment.
MasonryDemo passes autoAdjust={false}, but the Masonry components added in this PR expose adjustHeight (and there are no autoAdjust references in the repo). This means the demo won’t exercise the new behavior and will pass an unknown prop down. Rename this prop usage to adjustHeight and (if intended) wire it into DEFAULT_PROPS/useComponentProps so it can be toggled from the demo UI.
| }, | ||
| { | ||
| name: 'adjustHeight', | ||
| type: 'boolean', | ||
| default: 'false', | ||
| description: 'Automatically adjusts container height to fit all items and prevent overlap.' | ||
| } |
There was a problem hiding this comment.
adjustHeight is documented in propData, but the demo’s controlled props (DEFAULT_PROPS and the props destructuring) don’t include it and there’s no corresponding PreviewSwitch. As-is, the prop table suggests a feature that can’t be interacted with in the demo. Consider adding adjustHeight to DEFAULT_PROPS and exposing a toggle in the Customize section.
| return { | ||
| grid: gridItems, | ||
| containerHeight: colHeights.length ? Math.max(...colHeights) + 12 : 0 | ||
| }; |
There was a problem hiding this comment.
containerHeight adds a hard-coded + 12 when colHeights.length is truthy. This magic number isn’t explained and makes the height computation inconsistent with the other Masonry variants (which return the max column height without an extra offset). Either remove the extra offset or replace it with a clearly named constant/comment explaining what it represents (e.g., bottom padding/shadow allowance).
Summary
Adds an optional
adjustHeightprop to the Masonry component to allow the container to dynamically match its content height and prevent overlap with subsequent elements.###Problem
The Masonry layout uses absolute positioning, which causes the container to have no intrinsic height. This leads to overlapping content below the component unless height is manually managed.
Solution
adjustHeightprop to enable dynamic height behaviorChanges
Core Component Updates
adjustHeightprop (default:false)Variants Updated
To maintain consistency across the library, the change was applied to all Masonry implementations:
src/content/Components/Masonry/Masonry.jsx(default JS version)src/tailwind/Components/Masonry/Masonry.jsx(Tailwind version)src/ts-default/Components/Masonry/Masonry.tsx(TypeScript version)src/ts-tailwind/Components/Masonry/Masonry.tsx(TypeScript + Tailwind)Supporting Files
src/constants/code/Components/masonryCode.jsupdated to reflect new prop in code previewssrc/demo/Components/MasonryDemo.jsxupdated to demonstrate usagepublic/r/Masonry-*.jsonupdated to sync registry component definitionsNo breaking changes. Existing behavior remains unchanged by default.